<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>

	<meta charset="utf-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

	<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
	<link th:href="@{/css/font-awesome.css}" rel="stylesheet"/>
	<link th:href="@{/css/plugins/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet"/>
	<link th:href="@{/css/animate.css}" rel="stylesheet"/>
	<link th:href="@{/css/style.css}" rel="stylesheet"/>

</head>
<style>
	.headCss{
		position: absolute;
		margin-top: 10px;
	}

</style>
<body>

<div class="col-sm-12">
	<!-- Example Events -->
	<div class="example-wrap">
		<div class="headCss">
			<div class="btn-group hidden-xs" id="exampleTableEventsToolbar" role="group">
				<button type="button" class="btn btn-outline btn-default" onclick="add()">
					<i class="glyphicon glyphicon-plus" aria-hidden="true"></i>
				</button>
				<button type="button" class="btn btn-outline btn-default" onclick="change()">
					<i class="glyphicon glyphicon-edit" aria-hidden="true"></i>
				</button>
				<button type="button" class="btn btn-outline btn-default" onclick="delet()">
					<i class="glyphicon glyphicon-trash" aria-hidden="true"></i>
				</button>
				<button type="button" class="btn btn-outline btn-default" onclick="F5()">
					<i class="glyphicon glyphicon-refresh" aria-hidden="true"></i>
				</button>
			</div>
		</div>
			<form id="form" method="post" action="#" name="form">
				<table id="exampleTableEvents" data-height="600" data-mobile-responsive="true">
					<thead>
					<tr>
						<th data-field="state" data-checkbox="true"></th>
						<th data-field="deptId">部门ID</th>
						<th data-field="deptName">部门名称</th>
						<th data-field="deptMemo">部门描述</th>
						<th data-field="deptPeople">部门负责人</th>
						<th data-field="deptTel">部门联系方式</th>
						<th data-field="createTime" data-formatter="dateTimeFormat">操作时间</th>
					</tr>
					</thead>
				</table>
			</form>

	</div>
	<!-- End Example Events -->
</div>

</body>
<!-- 全局js -->
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/plugins/layer/layer.min.js}"></script>

<!-- 自定义js -->
<script th:src="@{/js/content.js}"></script>

<!-- Bootstrap table -->
<script th:src="@{/js/plugins/bootstrap-table/bootstrap-table.min.js}"></script>
<script th:src="@{/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js}"></script>
<script th:src="@{/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js}"></script>
<!-- Peity -->
<script th:src="@{/js/demo/systemjs.js}"></script>



<script th:inline="javascript">
    /* <![CDATA[ */

       // alert("加载前");
        var depts=  [[${depts}]];
        //console.log(depts);
        var bt_data=depts;

       function dateTimeFormat(value) {
           var dateVal = value + "";
           if (value != null) {
               var date=new Date(dateVal);

               var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
               var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();

               var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
               var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
               var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();

               return date.getFullYear() + "-" + month + "-" + currentDate + " " + hours + ":" + minutes + ":" + seconds;
           }
       }

        $('#exampleTableEvents').bootstrapTable({
            data: bt_data,
            search: true,
            pagination: true,
            showRefresh: true,
            showToggle: true,
            showColumns: true,
            iconSize: 'outline',
            toolbar: '#meetTableTools',
            icons: {
                refresh: 'glyphicon-repeat',
                toggle: 'glyphicon-list-alt',
                columns: 'glyphicon-list'
            }
        });
		function add() {

            var id=bt_data.pop().deptId;
            $.ajax({
                type: "POST",
                url: "departmentadd.shtml",
                async:false,
                data: {"deptId":id},
                success: function(data){
                    layer.open({
                        type: 2,
                        title: '部门添加',
                        shadeClose: true,
                        shade: false,
                        area: ['450px', '600px'],
                        content: 'departmentadd.shtml' //iframe的url

                    });
                }
            })

        }




    function delet(){
        var check=$("tbody .selected");
        var deptIds=[];


        for(var i=0;i<check.length;i++){
            deptIds.push(check.eq(i).children().eq(1).text());
        }

        if(deptIds.length<=0){
            layer.msg("请至少选择一条需要删除的数据。");
        }else{
            layer.msg('你确定要删除这'+deptIds.length+'条数据吗？', {
                time: 0 //不自动关闭
                ,btn: ['确定', '取消']
                ,yes: function(index){
                    $.ajax({
                        type: "POST",
                        url: "deptdelet.shtml",
                        async:false,
                        data: {
                            "deptIds":deptIds
                        },
                        success: function(data){
                            layer.msg("删除成功");
                            setTimeout(function () {
                                location.reload();
                            },1000)
                        }
                    })
                    layer.close(index);

                }
            });

        }


        /* ]]> */
    }

    function change() {
        var check=$("tbody .selected");
        var checknum=check.length;
        var deptIds=check.children().eq(1).text();
        /* <![CDATA[ */
        if(checknum==0){
            layer.msg("请选择你需要修改的数据。")
        }else if(checknum>1){
            layer.msg("一次只能修改一条数据。")
        }else {
            //修改
            var department={
                "deptId":check.children().eq(1).text(),
                "deptName":check.children().eq(2).text(),
                "deptMemo":check.children().eq(3).text(),
                "deptPeople":check.children().eq(4).text(),
                "deptTel":check.children().eq(5).text()
            }
            //console.log(department);

            $.ajax({
                type: "POST",
                url: "departmentupdate.shtml",
                async:false,
                data: department,
                success: function(data){
                    layer.open({
                        type: 2,
                        title: '部门修改',
                        shadeClose: true,
                        shade: false,
                        area: ['450px', '600px']
                        ,content: 'departmentupdate.shtml' //iframe的url
                    });
                }
            })

        }


        /* ]]> */


    }

    function F5() {
        location.reload();
    }






</script>


</html>